<template>
	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer">
		<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close" />
		<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}">
			<view class="title is-nav-title is-flex is-block">Hi,欢迎使用
				<view @click="jihuota" class="is-size-14 has-space-pd-10 is-txt-inline is-blue-color" v-show="malock == 0">
					<uni-icons type="custom" color="#007AFF" size="16"></uni-icons>激活账号
				</view>
				<view class="is-nav-li is-grey is-size-20 has-floatr">
					<navigator url="/pages/member/setup" hover-class="navigator-hover">设置</navigator>				
				</view>
			</view>
			<view class="uidbox is-flex is-block">UID:{{foxtel}}</view>
			<view class="memubox is-flex is-block">
				<navigator url="/pages/account/account">
				<uni-icons class="has-floatr has-mgt-12 has-mgr-12" type="arrowright" color="#999999" size="20"></uni-icons>
				<view class="mesg line1">
					<view class="titlebox is-txt-inline">帐户</view>
					<view class="is-img-inline icobox"><image src="../../static/img/icon/ebuy_ico.png" mode=""></image></view>
					<view class="titlebox is-txt-inline has-floatr is-grey">{{user_money}}DC</view>
				</view>
				</navigator>
			</view>
			<view class="memubox is-flex is-block"  v-for="(item,index) in memu" :key="index">
				<navigator :url="item.page">
				<uni-icons class="has-floatr has-mgt-12 has-mgr-12" type="arrowright" color="#999999" size="20"></uni-icons>
				<view class="mesg" :class="[ item.line == 1 ? 'line1' : 'line2' ]">
					<view class="titlebox is-txt-inline">{{item.title}}</view>
					<uni-icons class="is-txt-inline has-mgl-12" :type="item.ico" :color="item.color" size="20"></uni-icons>
				</view>
				</navigator>
			</view>
			<view class="memubox is-flex is-block" @click="oncity">
				<view class="has-pd-20 is-size-18">
					<text class="has-floatr">选择地区</text>
					 <text class="is-blue">{{region}}</text>
				</view>
			</view>
			<popup-layer ref="popupRef" :direction="'right'">
				<view style="width:750upx;height: 100%;">
					<citySelect @back_city="back_city"></citySelect>
				</view>
			</popup-layer>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import citySelect from '@/components/citySelect/citySelect.vue';
	import popupLayer from '@/components/popup-layer/popup-layer.vue';
	export default {
		components: {
			citySelect,
			popupLayer,
			uniIcons},
		name: 'UniDrawer',
		props: {
			memu:{
				
			},
			foxtel:{
				type: String,
				default: ''
			},
			/**
			 * 显示状态
			 */
			visible: {
				type: Boolean,
				default: false
			},
			/**
			 * 显示模式（左、右），只在初始化生效
			 */
			mode: {
				type: String,
				default: ''
			},
			/**
			 * 蒙层显示状态
			 */
			mask: {
				type: Boolean,
				default: true
			},
			malock:{
				type: Number,
				default: 0
			},
			user_money:{
				type: String,
				default: '0.00'
			}
		},
		data() {
			return {
				statusBarHeight: this.statusBarHeight, //状态栏高度，在main.js里
				region: '请选择',
				visibleSync: false,
				showDrawer: false,
				rightMode: false,
				watchTimer: null,
			}
		},
		mounted() {
			this.$refs.popupRef.close();
		},
		watch: {
			visible(val) {
				if (val) {
					this.open()
				} else {
					this.close()
				}
			}
		},
		created() {
			this.visibleSync = this.visible
			setTimeout(() => {
				this.showDrawer = this.visible
			}, 100)
			this.rightMode = this.mode === 'right'
			this.region = uni.getStorageSync('region');
		},
		methods: {
			oncity() {
				var that = this
				this.$refs.popupRef.show();
			},
			back_city(e) { 
				if (e !== 'no') {
					this.region = e.cityName
					console.log(e.cityName)
					uni.setStorageSync('region', e.cityName);
					this.$refs.popupRef.close();
				} else {
					this.$refs.popupRef.close();
				}
			},
			close() {
				this._change('showDrawer', 'visibleSync', false)
			},
			open() {
				this._change('visibleSync', 'showDrawer', true)
			},
			_change(param1, param2, status) {
				this[param1] = status
				if (this.watchTimer) {
					clearTimeout(this.watchTimer)
				}
				this.watchTimer = setTimeout(() => {
					this[param2] = status
					this.$emit(status ? 'open' : 'close')
				}, status ? 50 : 300)
			},
			jihuota(){
				this.$emit('jihuo');
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 抽屉宽度
	$drawer-width: 80%;
	.uni-drawer {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		z-index: 9;
	}

	.uni-drawer__content {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: absolute;
		top: 0;
		width: $drawer-width;
		bottom: 0;
		background-color: $uni-bg-color;
		transition: transform 0.3s ease;
	}

	.uni-drawer--left {
		left: 0;
		transform: translateX(-$drawer-width);
	}

	.uni-drawer--right {
		right: 0;
		transform: translateX($drawer-width);
	}

	.uni-drawer__content--visible {
		transform: translateX(0px);
	}


	.uni-drawer__mask {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: $uni-bg-color-mask;
		transition: opacity 0.3s;
	}

	.uni-drawer__mask--visible {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		opacity: 1;
	}
	.title{
		padding:20upx 20upx 0 20upx;
		font-size: 48upx;
		width:90%;
	}
	.mesg{
		flex-direction: column;
		font-size: 36upx;
		padding: 20upx 10upx 20upx 30upx;
		margin:10upx 0;
	}
	.line1{border-bottom: 1px solid #F9F9F9;}
	.line2{border-bottom: 10px solid #F9F9F9;}
	.uidbox{padding:20upx;color: #C0C0C0;}
	.icobox{display: inline-block;}
	.icobox image{display: inline-block;height:48upx;width:150upx;}
	
</style>
